<template>
	<view class="payment">
		<view class="payment_main">
			<view class="count-down">
				<view style="margin-right: 15upx;">支付剩余时间时间</view>
				<uni-countdown :show-day="false" color="#FF5555" :hour="24" :minute="0" :second="0" @timeup="obsolete"></uni-countdown>
			</view>
			<view class="price"><span style="font-size: 28upx;">￥</span>{{info.totalPrice}}</view>
			<view class="orderName">{{info.info.name}}</view>
			<view class="methodBox">
				<view class="methodItem" v-for="(item,index) in methodList" :key="index" @click="selectMethod(index)">
					<view class="method_L">
						<view class="paymentIcon">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="methodName">{{item.name}}</view>
					</view>
					<view :class="[current==index?'current_s':'method_R']">
						<view v-if="current==index">
							<u-icon name="checkmark" color="#FFAC3F" size="25"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="confirmBtn" @click="surePay">确认支付￥{{info.totalPrice}}</view>
		<number-jpan :length="6" @closeChange="closeChange($event)" :showNum="false" ref="numberPad"></number-jpan>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {wxPayment,zfbPayment} from "@/utils/app.js";
	import numberJpan from "@/components/numberJpan/numberJpan.vue";
	export default {
		data() {
			return {
				// #ifdef APP
				methodList:[{name:"支付宝支付",image:"../../static/share/payment2.png"},{name:"微信支付",image:"../../static/share/payment.png"},{name:"余额支付",image:"../../static/index/balance.png"}],
				// #endif
				// #ifdef MP-WEIXIN
				methodList:[{name:"微信支付",image:"../../static/share/payment.png"},{name:"余额支付",image:"../../static/index/balance.png"}],
				// #endif
				current:0,
				TotalPrice:0,
				info:{},
				submitData:{}
			}
		},
		components:{'number-jpan':numberJpan},
		onLoad(options) {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			this.info = uni.getStorageSync("paymentData");
		},
		methods: {
			closeChange(e){
				this.submitData.pay_password = e;
				this.submitPay();
			},
			surePay(){
				let obj = {};
				obj.shop_package_id = this.info.shop_package_id;
				obj.num = this.info.num;
				// obj.shop_id = this.info.info.shopObj.shop_id;
				if(this.info.share_user_id){
					obj.share_user_id = this.info.share_user_id;
				}
				// #ifdef MP-WEIXIN
				if(this.current==0){
					obj.pay_type = 10;
					this.submitData = obj;
					this.submitPay();
				}else if(this.current==1){
					obj.pay_type = 40;
					this.submitData = obj;
					this.$refs.numberPad.open();
				}
				// #endif
				// #ifdef APP
				if(this.current==0){
					obj.pay_type = 30;
					this.submitData = obj;
					this.submitPay();
				}else if(this.current==1){
					obj.pay_type = 20;
					this.submitData = obj;
					this.submitPay();
				}else if(this.current==2){
					obj.pay_type = 40;
					this.submitData = obj;
					this.$refs.numberPad.open();
				}
				// #endif
			},
			submitPay(){
				this.$u.api.shopPackageOrderAdd(this.submitData).then(res=>{
					console.log(res);
					if(this.submitData.pay_type==10||this.submitData.pay_type==20){
						wxPayment(JSON.parse(res.data.data.sign)).then(rep=>{
							this.$refs.uToast.show({
								title:"支付成功",
								type:"success",
								duration:2000
							})
							setTimeout(()=>{
								uni.redirectTo({
									url:"/pages/pagethree/pages/MyOrder/MyOrder"
								})
							},1500)
						});
					}else if(this.submitData.pay_type==30){
						zfbPayment(res.data.data).then(rep => {
							this.$refs.uToast.show({
								title:"发布成功",
								type:"success",
								duration:1000
							})
							setTimeout(()=>{
								uni.redirectTo({
									url:"/pages/pagethree/pages/MyOrder/MyOrder"
								})
							},1000)
						})
					}else if(this.submitData.pay_type==40){
						this.$refs.uToast.show({
							title:"支付成功",
							type:"success",
							duration:2000
						})
						setTimeout(()=>{
							uni.redirectTo({
								url:"/pages/pagethree/pages/MyOrder/MyOrder"
							})
						},1500)
					}
				})
			},
			obsolete(){
				uni.showToast({
					title:"支付已过期",
					duration:2000,
					success(res) {
						uni.navigateBack({
							delta:1
						})
					}
				})
			},
			selectMethod(index){
				this.current = index
			}
		}
	}
</script>

<style scoped>
.payment{
	background: #F3F3F3;
	height: 100vh;
	overflow: auto;
	/* padding-top: 100upx; */
}
.payment_main{
	margin-top: 80upx;
	padding: 0 24upx;
}
.count-down{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 36upx;
	text-align: center;
	color: #999999;
}
.price{
	font-size: 56upx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	line-height: 96upx;
	text-align: center;
	margin-top: 24upx;
	color: #333333;
}
.orderName{
	font-size: 20upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 36upx;
	color: #999999;
	margin-top: 16upx;
	text-align: center;
}
.methodBox{
	width: 702upx;
	/* height: 192upx; */
	background: #FFFFFF;
	opacity: 1;
	border-radius: 8upx;
	margin-top: 48upx;
}
.methodItem{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32upx 24upx 16upx;
}
.method_L{
	display: flex;
	align-items: center;
}
.paymentIcon{
	width: 48upx;
	height: 48upx;
	overflow: hidden;
	background-position: center;
	background-size: cover;
}
.paymentIcon>image{
	width: 100%;
	height: 100%;
}
.methodName{
	font-size: 24upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 36upx;
	color: #333333;
	margin-left: 16upx;
}
.method_R{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32upx;
	height: 32upx;
	background: #EEEEEE;
	border: 2upx solid #CCCCCC;
	border-radius: 50%;
}
.current_s{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32Upx;
	height: 32Upx;
	background: #FFF5EA;
	border: 2Upx solid #FFAC3F;
	border-radius: 50%;
	opacity: 1;
}
.confirmBtn{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 750upx;
	height: 100upx;
	background: #FFAC3F;
	opacity: 1;
	font-size: 28upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 100upx;
	text-align: center;
	color: #FFFFFF;
}
</style>
